<template>
  <div
    class="crop-page"
    :style="{height: docuHeight + 'px'}"
  >
    <div
      class="content"
    >
      <VueCropper
        ref="cropper"
        :img="option.img"
        :output-size="option.outputSize"
        :output-type="option.outputType"
        :info="option.info"
        :full="option.full"
        :can-scale="option.canScale"
        :can-move="option.canMove"
        :can-move-box="option.canMoveBox"
        :fixed-box="option.fixedBox"
        :original="option.original"
        :auto-crop="option.autoCrop"
        :auto-crop-width="option.autoCropWidth"
        :auto-crop-height="option.autoCropHeight"
        :center-box="option.centerBox"
        :high="option.high"
        :info-true="option.infoTrue"
        @imgLoad="imgLoad"
      />
    </div>
    <div class="btn-bottom">
      <van-button
        class="btn-cancel"
        size="small"
        @click="onCancel"
      >
        取消
      </van-button>
      <van-button
        class="btn-save"
        size="small"
        type="primary"
        @click="onSave"
      >
        保存
      </van-button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { VueCropper } from 'vue-cropper'
import { SET_USER_INFO } from '@/store/mutations'
export default Vue.extend({
  components: {
    VueCropper,
  },
  props: {
    imgData: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      cropFinished: false,
      docuHeight: Math.floor(document.documentElement!.clientHeight),
      option: {
        img: this.imgData, // 裁剪图片的地址url 地址 || base64 || blob
        outputSize: 1, // 裁剪生成图片的质量
        full: false, // 是否输出原图比例的截图
        outputType: 'png', // 裁剪生成图片的格式
        fixedNumber: [1, 1], // 截图框的宽高比例
        fixedBox: true, // 固定截图框大小 不允许改变
        original: false, // 上传图片按照原始比例渲染
        canScale: true, // 图片是否允许滚轮缩放
        canMove: true, // 上传图片是否可以移动
        canMoveBox: false, // 截图框能否拖动
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 240, // 默认生成截图框宽度
        autoCropHeight: 240, // 默认生成截图框高度
        centerBox: false, // 截图框是否被限制在图片里面
        high: true, // 是否按照设备的dpr 输出等比例图片
        info: false, // 裁剪框的大小信息
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
    }
  },
  methods: {
    imgLoad (msg: any) {
      console.log('imgLoad', msg)
    },
    onSave () {
      (this.$refs.cropper as any).getCropData((data: any) => {
        const commaPosition = data.indexOf(',') + 1
        this.$axios({
          url: 'Setting/UploadUserImg',
          data: {
            Content: data.substr(commaPosition),
          },
        }).then(res => {
          this.cropFinished = true
          this.$store.commit(SET_USER_INFO, { PicUrl: res })
          this.$emit('isCropFinished', this.cropFinished)
          console.log('isCropFinished', this.cropFinished)
        })
      })
    },
    onCancel () {
      this.$emit('isCropFinished', this.cropFinished)
      console.log('isCropFinished', this.cropFinished)
    },
  },
})
</script>

<style lang="scss" scoped>
.crop-page {
  background: #333;
  z-index: 9999;
  position: relative;
}
.content {
  width: 100%;
  height: calc(100%-120px);
  margin: 0 auto;
}
.btn-bottom {
  height: 120px;
  padding: 30px 30px;
  display: flex;
  justify-content: flex-end;
  .btn-cancel, .btn-save {
    // @include px1border(all, $primary-web);
    border-radius: 5px;
  }
  .btn-cancel {
    margin-right: 30px;
  }
}

</style>
